<template>
  <div class="log">
    <div class="add">
      <el-button @click="openList" size="mini" type="primary">添加日志</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData.data" style="width: 100%">
        <el-table-column align="center" prop="createTime" label="日期"> </el-table-column>
        <el-table-column align="center" prop="title" label="标题"> </el-table-column>
        <el-table-column align="center" :render-header="renderHeader" prop="name" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" class="mr10" v-hasPermi="['merchant:product:update']"
              @click="getUpdate(scope.row.id)">编辑</el-button>
            <el-button size="small" class="mr10" type="danger" plain v-hasPermi="['merchant:product:update']"
              @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination :page-sizes="[20, 40, 60, 80]" :page-size="tableFrom.limit" :current-page="tableFrom.page"
      layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
      @current-change="pageChange" />
    <el-dialog :close-on-click-modal="false" top="8vh" :modal="false" :title="naviTitle" :visible.sync="showLog"
      width="800px" @close="close">
      <div class="Tinymce">
        <div class="name">
          <el-form :model="formData" :rules="rules" ref="formRef">
            <el-form-item label="日志标题" prop="title">
              <el-input v-model="formData.title" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item label="日志内容" prop="tinymceValue">
              <Tinymce ref="tinymces" v-model="formData.tinymceValue"></Tinymce>
            </el-form-item>
          </el-form>
        </div>
        <div class="content">

        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { CrowdLogLstApi, crowdLogDeleteApi, addCrowdLog, crowdLogInfo, editCrowdLog } from '@/api/store';

import Tinymce from '@/components/Tinymce/index';
import { is } from 'core-js/core/object';
export default {
  name: 'changeLog',
  components: { Tinymce },
  props: {
    id: {
      type: Number,
      default: '',
    },
  },
  data() {
    return {
      loading: false,
      naviTitle: '添加日志',
      showLog: false,
      tinymceValue: '',
      input: '',
      tableFrom: {
        page: 1,
        limit: 20,
        keyword: '',
      },
      tableData: {
        data: [],
        total: 0,
      },
      listLoading: true,
      isUpdate: false,
      editId: 0,
      formData: {
        title: '',
        tinymceValue: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        tinymceValue: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      }
    };
  },
  mounted() {
    this.getList(1);
  },
  methods: {
    openList() {
      this.showLog = true;
      this.naviTitle = '添加日志';
      this.formData.title = ''
      this.$refs.tinymces ? this.$refs.tinymces.setContent('') : ''
    },
    getUpdate(id) {
      console.log();
      this.naviTitle = '编辑日志';
      this.showLog = true;
      this.editId = id;
      this.getInfo(id);
    },

    getInfo(id) {
      crowdLogInfo(id).then((res) => {
        this.formData.title = res.title;
        this.$refs.tinymces.setContent(res.content?res.content:'')
      });
    },
    handleSubmit() {
      let that = this
      this.$refs.formRef.validate((valid) => {
        console.log(valid)
        if (valid) {
          that.submitForm()
        }
      });
    },
    submitForm() {

      // 如果正在加载中，直接返回
      console.log(this.loading);

      if (this.loading) {
        return;
      }
      // 验证通过，执行下一步操作
      let params = {
        title: this.formData.title,
        content: this.formData.tinymceValue,
        productId: this.id,
      };

      // 设置加载状态
      this.loading = true;

      if (this.naviTitle != '添加日志') {
        params.id = this.editId;
        editCrowdLog(params).then((res) => {
          this.$message.success('修改成功');
          this.loading = false;
          this.formData.title = '';
          this.formData.tinymceValue = '';
          this.showLog = false;
          this.getList(1);
          this.loading = false;
        }).catch(()=>{
          this.loading = false;
        });
      } else {
        addCrowdLog(params).then((res) => {
          this.$message.success('添加成功');
          this.loading = false;
          this.formData.title = '';
          this.formData.tinymceValue = '';
          this.showLog = false;
          this.getList(1);
        
        }).catch(()=>{
          this.loading = false;
        });
      }
    },

    // 删除
    handleDelete(id, type) {
      this.$modalSure(`删除 id 为 ${id}的日志吗`).then(() => {
        const deleteFlag = 'delete';

        crowdLogDeleteApi(id, deleteFlag).then(() => {
          this.$message.success('删除成功');
          this.getList(1);
        });
      });
    },

    // 列表
    getList(num, id) {
      this.listLoading = true;
      this.tableFrom.page = num ? num : this.tableFrom.page;
      this.tableFrom.productId = id ? id : this.id;
      CrowdLogLstApi(this.tableFrom)
        .then((res) => {
          console.log(res);
          this.tableData.data = res.list;
          this.tableData.total = res.total;
          this.listLoading = false;
        })
        .catch((res) => {
          this.listLoading = false;
        });
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val;
      this.getList('');
    },
    pageChange(val) {
      this.tableFrom.page = page;
      this.getList('');
    },
    close() {
      this.showLog = false;
    },
    renderHeader(h) {
      return (
        <p>
          <span style="padding-right:5px;">操作</span>
          <i class="el-icon-setting" onClick={() => this.handleAddItem()}></i>
        </p>
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.log {
  padding: 0 30px;

  .add {
    margin-bottom: 10px;
  }

  .table {
    height: 50vh;
    overflow-y: auto;
    width: 100%;
    border-top: 1px solid #e6ebf5;
  }
}

.Tinymce {
  overflow: hidden;

  .name {
    margin-bottom: 20px;

    >span {
      margin-bottom: 5px;
      display: block;
      font-weight: bold;
    }
  }

  .content {
    >span {
      margin-bottom: 5px;
      display: block;
      font-weight: bold;
    }
  }
}

::v-deep .el-form-item__label {
  float: none;
  text-align: left;
}
</style>
